<template>
  <div class="userManagement-container view flex-row">
     <el-dialog
        title="提示"
        v-model="dialogFormVisible"
        width="90%"
        @close="close">
        <div class="width100">
            <el-form :inline="true" :model="queryForm" @submit.native.prevent>
                <el-form-item>
                    <el-radio-group v-model="queryForm.jiedan">
                      <el-radio :label="1">日结单</el-radio>
                      <el-radio :label="2">月结单</el-radio>
                      <el-radio :label="3">指定周期</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item
                    v-if="queryForm.jiedan == 1"
                    label="日结单"
                    class="m-l-30"
                  >
                    <el-date-picker
                      format="YYYY-MM-DD"
                      :picker-options="pickerOptions"
                      value-format="YYYY-MM-DD"
                      v-model="queryForm.day"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </el-form-item>

                  <el-form-item
                    v-if="queryForm.jiedan == 2"
                    label="月结单"
                    class="m-l-30"
                  >
                    <el-date-picker
                      format="YYYY-MM"
                      value-format="YYYY-MM"
                      v-model="queryForm.month"
                      type="month"
                      placeholder="选择月份"
                    ></el-date-picker>
                  </el-form-item>

                  <el-form-item
                    label="指定周期"
                    v-if="queryForm.jiedan == 3"
                    class="m-l-30"
                  >
                    <el-date-picker
                      format="YYYY-MM-DD"
                      :picker-options="pickerOptions"
                      value-format="YYYY-MM-DD"
                      v-model="queryForm.startday"
                      type="date"
                      placeholder="选择开始日期时间"
                    ></el-date-picker>
                  </el-form-item>

                  <el-form-item label="-" v-if="queryForm.jiedan == 3">
                    <el-date-picker
                      v-model="queryForm.endday"
                      format="YYYY-MM-DD"
                      :picker-options="pickerOptions"
                      value-format="YYYY-MM-DD"
                      type="date"
                      placeholder="选择结束日期时间"
                    ></el-date-picker>
                  </el-form-item>

                <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="fetchData">
            查询
          </el-button>
        </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="expor">导出</el-button>
                </el-form-item>
            </el-form>
            <el-card shadow="never" class="box-card" :body-style="{ padding: '0px' }">
                <div slot="header" class="clearfix" style="padding-top:10px;padding-bottom:10px;">
                <span>名称: {{username}}  </span>  <span>资金信息</span>
                </div>

                <el-table
                v-loading="listLoading"
                :data="tableData1"
                style="width: 100%"
                >
                <el-table-column
                    prop="bz"
                    align="center"
                    label="币种"
                ></el-table-column>
                <el-table-column
                    prop="startdeposit"
                    align="center"
                    label="期初结存"
                ></el-table-column>
                <el-table-column
                    prop="equity"
                    align="center"
                    label="客户权益"
                ></el-table-column>
                <el-table-column
                    prop="availablefunds"
                    align="center"
                    label="可用资金"
                ></el-table-column>
                <el-table-column
                    prop="margins"
                    align="center"
                    label="保证金占用"
                ></el-table-column>
                <el-table-column
                    prop="dsfunds"
                    align="center"
                    label="出入金"
                ></el-table-column>
                <el-table-column
                    prop="fees"
                    align="center"
                    label="手续费"
                ></el-table-column>
                <el-table-column
                    prop="yk"
                    align="center"
                    label="总盈亏"
                ></el-table-column>
                </el-table>
            </el-card>
            </div>

        <div class="width100">
            <el-card shadow="never" class="box-card" :body-style="{ padding: '0px' }">
              <div slot="header" class="clearfix" style="padding-top:10px;padding-bottom:10px;">
                <span>成交记录</span>
              </div>

              <el-table
              
                v-loading="listLoading"
                class="offset-Table"
                :data="tableData2"
              >
                <el-table-column prop="uid" label="uid"></el-table-column>
                <el-table-column prop="nickname" label="昵称"></el-table-column>
                <el-table-column prop="username" label="账号"></el-table-column>
                <el-table-column prop="ordernum" label="订单编号"></el-table-column>
                <el-table-column
                  prop="positionnum"
                  label="成交价格"
                ></el-table-column>
               

                <el-table-column prop="volume" label="持仓数"></el-table-column>
                <el-table-column prop="contract" label="合约编号"></el-table-column>
                <el-table-column prop="codename" label="合约名称"></el-table-column>

                <el-table-column prop="cmd" label="方向">
                  <template #default="{ row }">
                    <div>
                      {{ row.risefall == 'rise' ? '买' : '卖' }}
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="volume" label="下单数量"></el-table-column>
                <el-table-column prop="playprice" label="持仓价"></el-table-column>
                <el-table-column prop="yk" label="持仓盈亏"></el-table-column>
                <el-table-column
                  prop="stop_loss_price"
                  label="止损"
                ></el-table-column>
                <el-table-column
                  prop="stop_profit_price"
                  label="止盈"
                ></el-table-column>
                <el-table-column prop="margin" label="保证金"></el-table-column>
                <el-table-column prop="fee" label="手续费"></el-table-column>
                <el-table-column prop="rate" label="币种"></el-table-column>
                <el-table-column prop="rate" label="成交时间">
                  <template #default="{ row }">
                    <div>
                      {{ dayjs.unix(row.updatetime).format('YYYY-MM-DD HH:mm:ss') }}
                    </div>
                  </template>
                </el-table-column>
                
              </el-table>
            </el-card>
        </div> 

        <div class="width100">
            <el-card shadow="never" class="box-card" :body-style="{ padding: '0px' }">
              <div slot="header" class="clearfix" style="padding-top:10px;padding-bottom:10px;">
                <span>平仓明细</span>
              </div>

              <el-table
                v-loading="listLoading"
                class="offset-Table"
                :data="tableData3"
              >
                <el-table-column prop="uid" label="uid"></el-table-column>
                <el-table-column prop="nickname" label="昵称"></el-table-column>
                <el-table-column prop="username" label="账号"></el-table-column>
                <el-table-column prop="ordernum" label="订单编号"></el-table-column>
                <el-table-column
                  prop="positionnum"
                  label="成交价格"
                ></el-table-column>
               

                <el-table-column prop="volume" label="持仓数"></el-table-column>
                <el-table-column prop="contract" label="合约编号"></el-table-column>
                <el-table-column prop="codename" label="合约名称"></el-table-column>

                <el-table-column prop="cmd" label="方向">
                  <template #default="{ row }">
                    <div>
                      {{ row.risefall == 'rise' ? '买' : '卖' }}
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="volume" label="下单数量"></el-table-column>
                <el-table-column prop="playprice" label="持仓价"></el-table-column>
                <el-table-column prop="yk" label="持仓盈亏"></el-table-column>
                <el-table-column
                  prop="stop_loss_price"
                  label="止损"
                ></el-table-column>
                <el-table-column
                  prop="stop_profit_price"
                  label="止盈"
                ></el-table-column>
                <el-table-column prop="margin" label="保证金"></el-table-column>
                <el-table-column prop="fee" label="手续费"></el-table-column>
                <el-table-column prop="rate" label="币种"></el-table-column>
                <el-table-column prop="rate" label="成交时间">
                  <template #default="{ row }">
                    <div>
                      {{ dayjs.unix(row.updatetime).format('YYYY-MM-DD HH:mm:ss') }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
        </div>         
    </el-dialog>
    
  </div>
</template>

<script>
  import { userfunds, exportdata } from '@/api/index'
  import dayjs from 'dayjs'
  
  export default {
    name: 'jiesuan',
    components: { 
    },
    data() {
      let that = this
      return {
        dayjs: dayjs,
        dialogFormVisible: false,
        activeName: '1',
        list: null,
        isCheck: false,
        value1: '',
        nodes: [],
        grouplist: [],
        ztreeObj: null,
        username:"",
        setting: {
          data: {
            simpleData: {
              enable: true,
              pIdKey: 'pid',
            },
          },
          view: {
            showIcon: false,
          },
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date())
              },
            },
            {
              text: '昨天',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              },
            },
            {
              text: '一周前',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              },
            },
          ],
        },
        options: [
          {
            value: 1,
            label: '逐笔',
          },
          {
            value: 2,
            label: '盯市',
          },
        ],
        tableData1: [],
        tableData: [],
        tableData2: [],
        tableData3: [],
        listLoading: false,
        layout: 'total, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        elementLoadingText: '正在加载...',
        groupid: 1,
        queryForm: {
          startday: '',
          endday: '',
          page: 1,
          jiedan: 1,
          month: '',
          day: '',
          uid: '',
          isall: '0',
          extype: 1,
        },
        
      }
    },

    created() {

    },
    mounted() {
          var now   = new Date();
          var monthn = now.getMonth()+1;
          var yearn  = now.getFullYear();
          var dayn = now.getDate();
          this.queryForm.day = yearn+"-"+monthn+"-"+dayn;
          //this.queryForm.month =yearn+"-"+ monthn;
    },
    methods: {
      close() {
        this.dialogFormVisible = false
      },
    expor() {
        let loadingInstance = this.$loading({ fullscreen: true })
        let query = { ...this.queryForm }
        if (query.jiedan == 1) {
          query.startday = ''
          query.endday = ''
          query.month = ''
          query.day = dayjs(query.day).format("YYYY-MM-DD");
        } else if (query.jiedan == 2) {
          query.startday = ''
          query.endday = ''
          query.day = ''
          query.month = dayjs(query.month).format("MM");
        } else if (query.jiedan == 3) {
          query.day = ''
          query.month = ''
          query.startday = dayjs(query.startday).format("YYYY-MM-DD");
          query.endday = dayjs(query.endday).format("YYYY-MM-DD");
        }
         exportdata(query).then( res => {
                 loadingInstance.close()
                if (res.code == 1) {
                    window.open(res.data.downurl)
                } else {
                    this.$message({
                        type: 'error',
                        message: res.msg
                    })
                }
        })
       
      },
      showEdit(row) {
        this.title = '结算单'
        this.queryForm.uid = row.id
        this.username = row.username
        this.getUserfunds()
        this.dialogFormVisible = true
      },
      getUserfunds() {
        this.listLoading = true
        let query = { ...this.queryForm }
        console.log(query);
        if (query.jiedan == 1) {
          query.startday = ''
          query.endday = ''
          query.month = ''
          query.day = dayjs(query.day).format("YYYY-MM-DD");
        } else if (query.jiedan == 2) {
          query.startday = ''
          query.endday = ''
          query.day = ''
          query.month = dayjs(query.month).format("MM");
        } else if (query.jiedan == 3) {
          query.day = ''
          query.month = ''
          query.startday = dayjs(query.startday).format("YYYY-MM-DD");
          query.endday = dayjs(query.endday).format("YYYY-MM-DD");
        }
        
        userfunds(query)
          .then((res) => {
            this.listLoading = false
            let arr = []
            for (let k in res.data) {
              arr.push(res.data[k])
            }
            this.tableData1 = arr
            this.tableData2 = res.data.orderlist
            this.tableData3 = res.data.pingcanglist
            this.listLoading = false
            
          })
          .catch((ret) => {
            this.listLoading = false
          })
      },

      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.page = 1
        this.fetchData()
      },
      /*
      getChichang() {
        onlineorders(this.queryForm)
          .then((res) => {
            this.tableData = res.data.list
            this.total = res.data.total
          })
          .catch((ret) => {})
      },
      getWT() {
        wtorders(this.queryForm)
          .then((res) => {
            this.tableData = res.data
          })
          .catch((ret) => {})
      },*/
      getChuRuJin() {
        dsfunds(this.queryForm)
          .then((res) => {
            this.tableData = res.data
          })
          .catch((ret) => {})
      },
      async fetchData() {
        this.getUserfunds()
      },
    },
  }
</script>
<style lang="scss" scoped>
  ::v-deep .report-content {
    .el-tabs__header {
      margin-bottom: 0 !important;
    }
  }
  ::v-deep .box-card-outer {
    border-top: 0 !important;
    .el-card {
      border-top: 0 !important;
    }
  }
  ::v-deep .box-card-no-padding {
    .el-card__body {
      padding-left: 0;
      padding-right: 0;
    }
  }
  .minw300 {
    min-width: 100px;
  }
</style>
